<template>
  <div id="playdetail">
    <div class="top">
      <div class="cover">
        <img class="j-img" :src="coverImgUrl + 'param200y200'">
        <span class="msk"></span>
      </div>
      <div class="cnt">
        <div class="cntc">
          <div class="tit">
            <h2>{{playlist.name}}</h2>
          </div>
          <div class="user">
            <img class="face" :src="creator.avatarUrl + 'param40y40'">
            <span class="nickname">{{creator.nickname}}</span>
          </div>
          <div class="tags">
            <b>标签：</b>
            <el-tag v-for="tag in tags" :key="tags.id">{{tag}}</el-tag>
          </div>
          <p class="intr">
            <b>介绍：</b>
            {{playlist.description}}
          </p>
        </div>
      </div>
    </div>
    <div class="table-bottom">
      <div class="table-title">
        <h3>歌曲列表</h3>
        <span class="song-num">{{playlist.trackCount}}首歌</span>
        <div class="more">播放：
          <strong class="s-fc6">{{playlist.playCount}}</strong>次</div>
        <a class="playing">全部播放</a>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%;">
      <el-table-column type="index" label="序号" width="55"></el-table-column>
      <el-table-column prop="name" label="歌曲标题" width="215"></el-table-column>
      <el-table-column prop="dt" label="时长" width="100"></el-table-column>
      <el-table-column prop="ar.0.name" label="歌手" width="90"></el-table-column>
      <el-table-column prop="al.name" label="专辑" width="140"></el-table-column>
      <el-table-column label="操作" width="">
        <template scope="scope">
          <el-button size="small" @click="playSong(scope.row.id)">播放</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from '../../api'
export default {
  data: function () {
    return {
      id: 0,
      playlist: [],
      creator: [],
      coverImgUrl: "",
      tags: [],
      tableData: [],
      time: [],
      song: [],
    }
  },
  created() {
    this.$store.state.admintop = "/songlist";
  },
  mounted: function () {
    //初始化列表
    this.$nextTick((res) => {
      this.getData();
    })
  },
  methods: {
    getData() {
      this.$axios.get(api.getSongList(this.$route.query.id))
        .then((res) => {
          this.playlist = res.data.playlist;
          this.creator = res.data.playlist.creator;
          this.coverImgUrl = res.data.playlist.coverImgUrl;
          this.tags = res.data.playlist.tags;
          this.tableData = res.data.playlist.tracks;
          this.tableData.forEach((item) => {
            item.dt = this.timers(item.dt);
          });
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    timers(value) {
      //时间字符格式化
      var length = Math.floor(parseInt(value / 1000))
      var minute = Math.floor(length / 60)
      if (minute < 10) {
        minute = '0' + minute
      }
      var second = length % 60
      if (second < 10) {
        second = '0' + second
      }
      return minute + ':' + second
    },
    playSong(id) {
      this.$axios.get(api.getSong(id))
        .then((res) => {
          this.song = res.data.data;
          this.song.forEach((item) => {
            this.$store.state.url = item.url
          })
          console.log('播放链接：', this.$store.state.url);
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  },
}
</script>

<style>
#playdetail {
  width: 700px;
  min-height: 700px;
  margin: 0 auto;
  padding: 47px 30px 40px 39px;
}

.top {
  overflow: auto;
}

.top .cover {
  width: 200px;
  height: 200px;
  float: left;
  position: relative;
  display: inline;
  margin: 0 -220px 0 0;
}

.j-img {
  display: block;
  width: 100%;
  height: 100%;
}

.msk {
  width: 208px;
  height: 208px;
  background-position: 0 -1285px;
  top: -4px;
  left: -4px;
  position: absolute;
  border: 1px solid #cccccc;
}

.cnt {
  width: 100%;
  float: right;
}

.cntc {
  margin-left: 230px;
}

.tit {
  margin: 0 0 12px;
  position: relative;
}

.tit h2 {
  line-height: 24px;
  font-size: 20px;
  font-weight: normal;
  word-wrap: break-word;
  white-space: normal;
}

.user {
  line-height: 35px;
}

.face {
  width: 35px;
  height: 35px;
}

.nickname {
  font-size: 12px;
  position: absolute;
  margin-left: 10px;
}

.tags {
  margin: 0 0 5px;
  line-height: 22px;
}

.tags b {
  font-weight: normal;
  font-size: 12px;
  color: #666666;
}

.el-tag {
  margin-right: 5px;
}

.intr {
  margin-top: 4px;
  line-height: 18px;
  color: #666666;
  font-size: 12px;
}

.intr b {
  display: inline-block;
  font-weight: normal;
  color: #666666;
}

.table-bottom {
  margin-top: 27px;
}

.table-title {
  height: 33px;
}

.table-title h3 {
  font-size: 20px;
  line-height: 28px;
  float: left;
  font-weight: normal;
}

.song-num {
  margin: 9px 0 0 20px;
  color: #666666;
  font-size: 12px;
  position: absolute;
}

.more {
  margin-top: 5px;
  float: right;
  font-size: 12px;
  color: #666666;
}

.s-fc6 {
  color: #c20c0c;
}

.playing {
  color: #4996d1;
  text-decoration: underline;
  float: right;
  margin-right: 20px;
  font-size: 12px;
  margin-top: 5px;
}

.el-table .cell {
  text-decoration: none;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}
</style>